<html>
    <head>
        <title>Mobile Weather</title>
        
        <style type="text/css">
            .label {
                 font-weight: bolder;
            }
        </style>
        
        <script type="text/javascript">
            function onWidgetLoad() {
                var menu = widget.menu;

                menu1001 = menu.createMenuItem(1001);
                menu1001.text = "Refresh";
                menu1001.onSelect = onRefresh;
                menu.setSoftKey(menu1001, menu.leftSoftKeyIndex);

                var menu1002 = menu.createMenuItem(1002);
                menu1002.text = "About";
                menu1002.onSelect = onAbout;
                menu.append(menu1002);

                onRefresh();
            }

            function onRefresh() {
                // Query the webservice
                var url = "http://weather.yahooapis.com/forecastrss?p=" + txtZipCode.value;

                var xmlhttp = new XMLHttpRequest();
                xmlhttp.open("GET", url);
                xmlhttp.onreadystatechange = function() {
                    if (xmlhttp.readyState == 4) {
                        onDataFetched(xmlhttp);
                        delete xmlhttp;
                    }
                };
                
                xmlhttp.send();
            }

            function onDataFetched(xmlhttp) {
                // [CF] - TODO - respond to HTTP errors...
                if (xmlhttp.status == 200) {
                    var data = xmlhttp.responseXML;
                    // data.setProperty("SelectionLanguage", "XPath");

                    // Extract the various bits of data out of the XML document
                    var title = data.selectSingleNode("/rss/channel/item/title/text()").nodeValue;

                    var conditionText = data.selectSingleNode("/rss/channel/item/yweather:condition/@text").nodeValue;
                    var conditionTemp = data.selectSingleNode("/rss/channel/item/yweather:condition/@temp").nodeValue;
                    var conditionCode = data.selectSingleNode("/rss/channel/item/yweather:condition/@code").nodeValue;

                    // [CF] - TODO - should be last() not 0
                    var forecastDate = data.selectSingleNode("/rss/channel/item/yweather:forecast[0]/@date").nodeValue;
                    var forecastLow = data.selectSingleNode("/rss/channel/item/yweather:forecast[0]/@low").nodeValue;
                    var forecastHigh = data.selectSingleNode("/rss/channel/item/yweather:forecast[0]/@high").nodeValue;
                    var forecastText = data.selectSingleNode("/rss/channel/item/yweather:forecast[0]/@text").nodeValue;

                    var temperatureUnits = data.selectSingleNode("/rss/channel/yweather:units/@temperature").nodeValue;

                    // Then format the results and display in the UI
                    lblTitle.innerHTML = title;
                    lblCurrentConditions.innerHTML = conditionText + " - " + conditionTemp + " " + temperatureUnits;
                    lblForecast.innerHTML = forecastDate + " - " + forecastText + ".<br/>High: " + forecastHigh + " Low: " + forecastLow;

                    imgCondition.setAttribute("src", "http://l.yimg.com/a/i/us/we/52/" + conditionCode + ".gif");
                    imgCondition.style.display = 'block';
                }
            }

            function onAbout() {
                alert("TODO - display about dialog...");
            }
        </script>
    </head>
    
    <body onload="onWidgetLoad();">
        <div>Zip Code: <input id="txtZipCode" type="text" value="29501" /></div>
        <div id="lblTitle"></div>
        
        <hr />
        
        <div><img id="imgCondition" align="right" style="display:none" /></div>
        
        <div class="label">Current Conditions:</div>
        <div id="lblCurrentConditions"></div>
        
        <div class="label">Forecast:</div>
        <div id="lblForecast"></div>
    </body>
</html>